import React from 'react';
import { Tabs, Toast, WingBlank, WhiteSpace, Flex, Card, Button } from 'antd-mobile';
import { StickyContainer, Sticky } from 'react-sticky';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import OrdersListView from '../components/OrdersListView';
import SearchInput from '../components/SearchInput';

const tabs = [
  {
    title: '全部订单',
    key: 0,
  },
  {
    title: '未审订单',
    key: 1,
  },
  {
    title: '已审订单',
    key: 2,
  },
];

class myOderTabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSearching: false,
      searchValue: '',
    };
  }
  componentWillReceiveProps(nextProps) {
    const searchData = Object.keys(nextProps.myorders.searchData);
    if (searchData.length !== 0) {
      this.setState({
        isSearching: true,
      });
    } else {
      this.setState({
        isSearching: false,
      });
    }
  }
  onChange= (searchValue) => {
    this.setState({ searchValue });
  };
  viewDetails = (parms) => {
    this.props.dispatch(routerRedux.push({ pathname: '/myOrderDetail', query: { ...parms } }));
  }
  changeData = (tabData) => {
    this.setState({
      isSearching: false,
    });
    if (tabData.title === '全部订单') {
      this.props.dispatch({
        type: 'myorders/getListOrder',
        payload: {
          customerId: 1,
          pageNum: 0,
        },
      });
    } else if (tabData.title === '未审订单') {
      this.props.dispatch({
        type: 'myorders/getListOrder',
        payload: {
          customerId: 1,
          pageNum: 0,
          isverify: '0',
        },
      });
    } else if (tabData.title === '已审订单') {
      this.props.dispatch({
        type: 'myorders/getListOrder',
        payload: {
          customerId: 1,
          pageNum: 0,
          isverify: '1',
        },
      });
    }
  }
  searchData = () => {
    const value = this.state.searchValue;
    if (value.replace(/(^\s*)|(\s*$)/g, '').length === 0) {
      Toast.fail('搜索不能为空', 1);
    } else {
      this.props.dispatch({
        type: 'myorders/searchCustomerOrder',
        payload: {
          orderNo: value,
        },
      });
    }
  }
  handleCancelSearch = () => {
    this.setState({
      isSearching: false,
    });
    this.props.dispatch({
      type: 'myorders/getSearchOrder',
      payload: {
        clear: true,
      },
    });
  }
  handleClearSearchValue = () => {
    this.setState({
      searchValue: '',
    });
  }
  returnToMyOrder = () => {
    this.props.dispatch({
      type: 'myorders/cancelSearchOrder',
    });
    const tabData = { title: '全部订单' };
    this.changeData(tabData);
    this.setState({
      isSearching: false,
    });
  }
  content = () => {
    if (this.state.isSearching) {
      const rowData = this.props.myorders.searchData[0];
      return (
        <WingBlank size="lg">
          <WhiteSpace size="lg" />
          <Flex justify="between" style={{ margin: 14 }}>
            <div>查询详情</div>
            <a style={{ color: '#5877f4' }} onClick={this.returnToMyOrder}>返回我的订单</a>
          </Flex>
          <Card style={{ color: '#ff6900' }}>
            <Card.Header
              title={<div><div style={{ color: '#434343' }}>订单号:</div><div style={{ color: '#ff6900' }}>{rowData.orderNo}</div></div>}
              extra={<div style={{ color: '#ea0025' }}>{rowData.isverify === '1' ? '已审核' : '未审核' }</div>}
            />
            <Card.Body onClick={() => this.viewDetails(rowData)}>
              <WhiteSpace size="lg" />
              <Flex justify="between">
                <div><span style={{ fontWeight: 'bold' }}>总数:</span> {rowData.lumpSum ? rowData.lumpSum : '待定'}</div>
              </Flex>
              <WhiteSpace size="lg" />
              <Flex justify="between">
                <div><span style={{ fontWeight: 'bold' }}>配送时间：</span> {rowData.distributionDate ? rowData.distributionDate : '待定'}</div>
              </Flex>
              <WhiteSpace size="lg" />
              <Flex justify="between">
                <Flex.Item><span style={{ fontWeight: 'bold' }}>审核人：</span> {rowData.auditor ? rowData.auditor : '暂无'}</Flex.Item>
              </Flex>
              <WhiteSpace size="lg" />
              <Flex justify="between">
                <Flex.Item><span style={{ fontWeight: 'bold' }}>审核时间：</span> {rowData.auditorTime ? rowData.auditorTime : '暂无'}</Flex.Item>
              </Flex>
            </Card.Body>
            <Card.Footer
              style={{
                borderTop: '1px solid #ecebed',
                marginTop: 20,
                padding: 10,
              }}
              content={
                <Flex justify="end">
                  {
                    this.renderButton(rowData)
                  }
                </Flex>
              }
            />
          </Card>
          <WhiteSpace size="lg" />
        </WingBlank>
      );
    } else {
      return (
        <StickyContainer>
          <Tabs
            tabBarPosition="top"
            tabs={tabs}
            initialPage={0}
            onTabClick={this.changeData}
            renderTabBar={this.renderTabBar}
          >
            {
                tabs.map((item) => {
                  return (
                    <OrdersListView key={item.key} tabData={item} props={this.props} />
                  );
                })
              }
          </Tabs>
        </StickyContainer>
      );
    }
  }
  renderButton = (rowData) => {
    if (rowData.isverify === '1') {
      return (
        <Button
          style={{ marginRight: '1%' }}
          type="ghost"
          size="small"
          inline
          onClick={() => this.addOrderToCar(rowData)}
        >再来一单
        </Button>
      );
    } else if (rowData.cancelFlag === '0') {
      return (
        <Button
          type="ghost"
          size="small"
          inline
          onClick={() => this.cancelOrder(rowData)}
        >取消订单
        </Button>
      );
    } else {
      return (
        <div>
          <span style={{ fontWeight: 'bold', color: '#434343', marginRight: 4 }}>备注: </span>
          <span>{rowData.cancelFlag === '1' ? '此订单已取消' : '此订单未取消' }</span>
        </div>
      );
    }
  }
    renderTabBar = (props) => {
      return (
        <Sticky>
          {({ style }) => (
            <div style={{ ...style, zIndex: 1 }}>
              <Tabs.DefaultTabBar {...props} />
            </div>
        )}
        </Sticky>
      );
    }
    render() {
      return (
        <div id="search">
          <SearchInput
            type="text"
            value={this.state.searchValue}
            placeholder="请输入订单号"
            onExtraClick={this.searchData}
            onClear={this.handleClearSearchValue}
            onChange={this.onChange}
            extraText="搜索"
          />
          {
            this.content()
          }
        </div>
      );
    }
}

export default connect(({ myorders }) => ({
  myorders,
}))(myOderTabs);
